<template>
  <!-- <div id="app">
   <router-link to="/vue">加载vue</router-link>
   子应用加载在当前元素中，根据id来查找元素
   <div id="vue"></div>
  </div>-->
  <div id="app">
    <div class="dom4Show" id="domId" ref="dom4Show"></div>
  </div>
</template>
<script>
var viewToken = "2d009516d4df4c4b9555fbb26297275a";
// 声明Viewer及App
var viewer3D;
var app;
var drawableContainer;
var viewAdded = false;
export default {
  name: "parent-app",
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.load();
  },
  methods: {
    /** 初始加载 */
    load() {
      // 配置JSSDK加载项
    window.onload = function() {
      var loaderConfig = new BimfaceSDKLoaderConfig();
      loaderConfig.viewToken = viewToken;
      BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
    }
    // 加载成功回调函数
    function successCallback(viewMetaData) {
      var dom4Show = document.getElementById('domId');
      // 设置WebApplication3D的配置项
      var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
      webAppConfig.domElement = dom4Show;
      // 创建WebApplication3D，用以显示模型
      app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
      app.addView(viewToken);
      viewer3D = app.getViewer();

      //创建外部元素容器
      var containerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
      containerConfig.viewer = viewer3D;
      drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(containerConfig);
      viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function() {
        viewAdded = true;
      });
    }
    // 加载失败回调函数
    function failureCallback(error) {
      console.log(error);
    }

    // 添加外部构件
    var isExternalObjectAdded = false;

    function addExternalObject() {
      if (isExternalObjectAdded || !viewAdded) {
        return;
      }
      var pathCurve = createCurve();
      extObjMng = new Glodon.Bimface.Plugins.ExternalObject.ExternalObjectManager(viewer3D);
      extObjMng.addObject("pathCurve", pathCurve);
      var objUrl = {url: "https://static.bimface.com/attach/6db9d5bcf88640f997b23be61e870ee8_%E6%B1%BD%E8%BD%A6.3DS"};
      extObjMng.addObjectByUrl("vehicle", objUrl,function(){
        console.log("vehicle is added");
        extObjId = extObjMng.getObjectIdByName("vehicle");
        isExternalObjectAdded = true;
       
        //添加外部构件监听事件
        extObjMng.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ExternalObjectTransformed, carEvent)
        // 将构件移至初始位置
        extObjMng.translate(extObjMng.getObjectIdByName("vehicle"), curve.getPointAt(0));
        isExternalObjectAdded = true;
        viewer3D.render();
      });
      // 手动更新场景包围盒，确保外部构件在相机显示范围内
      viewer3D.updateSceneBoundingBox();
      viewer3D.render();
    }
    
    //移除外部构件监听事件
    function removeEventListeners() {
      //debugger
      extObjMng.removeEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ExternalObjectTransformed, carEvent)
    }

    // 播放路径动画
    var isPathAnimationCreated = false;
    var isPathAnimationActivated = false;
    var pathAnimation = null;

    function playAnimation() {
      if (!isExternalObjectAdded || !viewAdded) {
        return;
      }
      if (!isPathAnimationCreated) {
        var pathAnimationConfig = new Glodon.Bimface.Plugins.Animation.PathAnimationConfig();
        pathAnimationConfig.viewer = viewer3D;
        pathAnimationConfig.path = curve;
        pathAnimationConfig.time = 8000;
        pathAnimationConfig.loop = true;
        pathAnimationConfig.objectNames = [extObjMng.getObjectIdByName("vehicle")];
        pathAnimationConfig.isPitchEnabled = true;
        pathAnimationConfig.isYawEnabled = true;
        pathAnimationConfig.originYaw = 0.5 * Math.PI;
        pathAnimation = new Glodon.Bimface.Plugins.Animation.PathAnimation(pathAnimationConfig);
        isPathAnimationCreated = true;
      }
      if (!isPathAnimationActivated) {
        pathAnimation.play();
        setButtonText('btnPlayAnimation', '暂停路径动画');
      } else {
        pathAnimation.pause();
        setButtonText('btnPlayAnimation', '开始路径动画');
      }
      isPathAnimationActivated = !isPathAnimationActivated;
    }

    // 停止路径动画
    function stopAnimation() {
      if (!isPathAnimationCreated || !viewAdded) {
        return;
      }
      pathAnimation.stop();
      setButtonText('btnPlayAnimation', '开始路径动画');
      isPathAnimationActivated = false;
    }

    var curve;
    // 路径曲线的构造函数
    function createCurve() {
      var curvePt0 = new THREE.Vector3(-74164.811, 62413.156, 9763.658);
      var curvePt1 = new THREE.Vector3(-66285.948, 44909.947, 9691.518);
      var curvePt2 = new THREE.Vector3(-63074.101, 38464.856, 6732.308);
      var curvePt3 = new THREE.Vector3(-60261.623, 34197.133, 3861.452);
      var curvePt4 = new THREE.Vector3(-57316.462, 29556.482, 1120.829);
      var curvePt5 = new THREE.Vector3(-53750.892, 24154.826, 11.803);
      var curvePt6 = new THREE.Vector3(-45046.754, 12593.307, -8.934);
      var curvePt7 = new THREE.Vector3(-36076.755, 4972.386, -37.461);
      var curvePt8 = new THREE.Vector3(-24992.013, 3658.454, -49.566);
      var curvePt9 = new THREE.Vector3(-19386.675, 7334.062, -52.222);
      var curvePt10 = new THREE.Vector3(-16320.860, 11763.684, -48.684);
      curve = new THREE.CatmullRomCurve3([curvePt0, curvePt1, curvePt2, curvePt3, curvePt4, curvePt5, curvePt6,curvePt7, curvePt8, curvePt9, curvePt10]);
      // 若不显示路径，可仅返回样条曲线对象
      var divPts = curve.getPoints(200);
      var geometry = new THREE.Geometry();
      geometry.vertices = divPts;
      var material = new THREE.LineBasicMaterial({
        color: 0x32D3A6
      });
      return new THREE.Line(geometry, material);
    }
    
    // 更新标签
    function carEvent(id,position) {
      drawableContainer.getItemById("labelItem").setWorldPosition(position);
    }

    // 加载js脚本
    function loadScript(url, callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.onload = function() {
        callback && callback();
      }
      script.src = url;
      document.head.appendChild(script);
    }

    // ************************** 按钮文字 **************************
    function setButtonText(btnId, text) {
      var dom = document.getElementById(btnId);
      if (dom != null && dom.nodeName == "BUTTON") {
        dom.innerText = text;
      }
    }
    },
  },
};
</script>
<style lang="scss">
#app {
  height: 100vh;
  position: relative;
  .operation {
    width: 100%;
    height: 60px;
    display: flex;
    justify-items: start;
    align-items: center;
    padding: 0 20px;
    > div {
      display: flex;
      flex-direction: column;
      margin-right: 20px;
      &.state {
        display: flex;
        flex-direction: inherit;
        width: 180px;
        justify-content: space-between;
        align-items: center;
      }
      &.keyframes {
        display: flex;
        flex-direction: inherit;
        width: 208px;
        justify-content: space-between;
        align-items: center;
      }
      &.mark {
        display: flex;
        flex-direction: inherit;
        width: 180px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .dom4Show {
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>
